<template>
    <div class="w-[616px]  top-[77px] bottom-0 absolute animate__slideInLeft   animate__animated left-[0]">
        <Title :type="0"></Title>

        <div class="w-[443px] h-[76px] bg-9 ml-[63px] mt-[19px] flex items-center">
            <img class="w-[50px] h-[50px] mx-[15px]" src="../assets/8.png" alt="">
            <div class="text-[16px]  font-medium mr-[18px] w-[110px]" style="color: #ABDFFF;">总体控制指标</div>
            <div class="w-[105px]">
                <CountTo :value="16568" style="color: #FFD15C;font-size:30px;font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;"></CountTo>
            </div>
            <div class="flex">
                <div class="mr-[4px] text-[14px]" style="color: #50FF01;">82%</div>
                <div><img class="w-[12px] h-[12px] flex justify-center items-center" src="../assets/21.png" alt=""></div>
            </div>
        </div>



        <div class="w-[443px] h-[76px] bg-9 ml-[63px] mt-[14px] flex items-center">
            <img class="w-[50px] h-[50px] mx-[15px]" src="../assets/11.png" alt="">
            <div class="text-[16px]  font-medium mr-[18px] w-[110px]" style="color: #ABDFFF;">招投标</div>
            <div class="w-[105px]">
                <CountTo :value="8956" style="color: #FFD15C;font-size:30px;font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;"></CountTo>
            </div>
            <div class="flex">
                <div class=" text-[14px]" style="color: #D83131;">82%</div>
                <div class="flex justify-center items-center ml-[4px]"><img class="w-[12px] h-[12px]" src="../assets/20.png" alt=""></div>
            </div>
        </div>


        <div class="w-[443px] h-[76px] bg-9 ml-[63px] mt-[14px] flex items-center">
            <img class="w-[50px] h-[50px] mx-[15px]" src="../assets/12.png" alt="">
            <div class="text-[16px]  font-medium mr-[18px] w-[110px]" style="color: #ABDFFF;">合同执行</div>
            <div class="w-[105px]">
                <CountTo :value="6768" style="color: #FFD15C;font-size:30px;font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;"></CountTo>
            </div>
            <div class="flex">
                <div class="mr-[4px] text-[14px]" style="color: #50FF01;">82%</div>
                <div><img class="w-[12px] h-[12px]" src="../assets/21.png" alt=""></div>
            </div>
        </div>

        <div class="w-[443px] h-[76px] bg-9 ml-[63px] mt-[14px] flex items-center">
            <img class="w-[50px] h-[50px] mx-[15px]" src="../assets/13.png" alt="">
            <div class="text-[16px]  font-medium mr-[18px] w-[110px]" style="color: #ABDFFF;">设备交付</div>
            <div class="w-[105px]">
                <CountTo :value="768" style="color: #FFD15C;font-size:30px;font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;"></CountTo>
            </div>
            <div class="flex">
                <div class="mr-[4px] text-[14px]" style="color: #50FF01;">82%</div>
                <div><img class="w-[12px] h-[12px]" src="../assets/21.png" alt=""></div>
            </div>
        </div>



        <div class="w-[443px] h-[76px] bg-9 ml-[63px] mt-[14px] flex items-center">
            <img class="w-[50px] h-[50px] mx-[15px]" src="../assets/14.png" alt="">
            <div class="text-[16px]  font-medium mr-[18px] w-[110px]" style="color: #ABDFFF;">关键文件交付</div>
            <div class="w-[105px]">
                <CountTo :value="568" style="color: #FFD15C;font-size:30px;font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;"></CountTo>
            </div>
            <div class="flex">
                <div class="mr-[4px] text-[14px]" style="color: #50FF01;">82%</div>
                <div><img class="w-[12px] h-[12px]" src="../assets/21.png" alt=""></div>
            </div>
        </div>



        <Title class="mt-[-17px] mb-[48px]" :type="1"></Title>

        <lineBox type="1" title="设备" value="56%" leftValue="44%" num="724"></lineBox>
        <lineBox type="2" title="大宗材料" value="30%" leftValue="70%" num="346" class="my-[26px]"></lineBox>
        <lineBox type="3" title="关键文件" value="50%" leftValue="50%" num="124"></lineBox>


    </div>
  </template>
  
  <script>
  import lineBox from './lineBox.vue'
  export default {
    name: 'leftBox',
    components: {lineBox},
  }
  </script>
  
  <style scoped>
  .bg-9{
      background-image: url(../assets/9.png);
      background-size: 100% 100%;
  }
  .bg-24{
    background:linear-gradient(to right,#0f2343,#0b70a3,#08cff1,#e8f9ff);
    animation: growWidth 2s forwards infinite;
  }
  @keyframes growWidth {
    from {width: 0px;}
    to {width: 100%;}
  }
  </style>
  